<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>指定不同颜色的立方体</title>
  <link rel="shortcut icon" href="../icon/sparrow.png" />
  <link rel="bookmark" href="../icon/sparrow.png" type="image/x-icon" />
  <link rel="stylesheet" href="../style/common.css" />
  <!-- 对于制作原型或学习，你可以这样使用最新版本： -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="../lib/webgl-debug.js"></script>
  <script src="../lib/webgl-utils.js"></script>
  <script src="../lib/cuon-matrix.js"></script>
  <script src="../lib/cuon-utils.js"></script>
  <script src="../lib/allx-utils.js"></script>
</head>

<body>
  <div id='gl26'>
    <h2>gl26 指定不同颜色的立方体</h2>
    <canvas id="c26" width="400" height="400">
      您的浏览器不支持canvas
    </canvas>
    <script type="text/javascript">
      var VERTEX_SHADER_SOURCE26 = `
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        uniform mat4 u_mvpMatrix;
        varying vec4 v_Color;
        void main() {
            gl_Position = u_mvpMatrix * a_Position;
            v_Color = a_Color;
        }`;
      var FRAGMENT_SHADER_SOURCE26 = `
        precision mediump float;
        varying vec4 v_Color;
        void main() {
          gl_FragColor = v_Color;
        }`;

      var c26 = document.getElementById("c26");
      var gl26 = c26.getContext('webgl');

      if (!initShaders(gl26, VERTEX_SHADER_SOURCE26, FRAGMENT_SHADER_SOURCE26)) {
        alert('Failed to init shaders');
      }

      var n26 = initVertexBuffers26(gl26);

      var u_mvpMatrix26 = gl26.getUniformLocation(gl26.program, 'u_mvpMatrix');
      // <projection matrix> * <view matrix>
      var mvpMatrix26 = new Matrix4();
      mvpMatrix26.setPerspective(30, 1, 1, 100);
      mvpMatrix26.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);

      gl26.uniformMatrix4fv(u_mvpMatrix26, false, mvpMatrix26.elements);

      gl26.enable(gl26.DEPTH_TEST);
      gl26.clearColor(0.0, 0.0, 0.0, 1.0);
      gl26.clear(gl26.COLOR_BUFFER_BIT | gl26.DEPTH_BUFFER_BIT);
      gl26.drawElements(gl26.TRIANGLES, n26, gl26.UNSIGNED_BYTE, 0);

      function initVertexBuffers26(gl) {
        // Create a cube
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        var vertices = new Float32Array([
          1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
          1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
          1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
          -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
          -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
          1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
        ]);

        var colors = new Float32Array([ // Colors
          0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)
          0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)
          1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)
          1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left
          1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down
          0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back
        ]);

        var indices = new Uint8Array([ // Indices of the vertices
          0, 1, 2, 0, 2, 3, // front
          4, 5, 6, 4, 6, 7, // right
          8, 9, 10, 8, 10, 11, // up
          12, 13, 14, 12, 14, 15, // left
          16, 17, 18, 16, 18, 19, // down
          20, 21, 22, 20, 22, 23 // back
        ]);

        if (!initArrayBuffer26(gl, vertices, 3, gl.FLOAT, 'a_Position')) {
          return -1;
        }
        if (!initArrayBuffer26(gl, colors, 3, gl.FLOAT, 'a_Color')) {
          return -1;
        }

        var indexBuffer = gl.createBuffer();
        if (!indexBuffer) {
          console.log('Failed to create index buffer');
          return -1;
        }
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

        return indices.length;
      }

      function initArrayBuffer26(gl, data, numOfComponents, dataType, attributeName) {
        var buffer = gl.createBuffer();
        if (!buffer) {
          console.log(Error('Failed to create buffer object'));
          return false;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        var attribute = gl.getAttribLocation(gl.program, attributeName);
        gl.vertexAttribPointer(attribute, numOfComponents, dataType, false, 0, 0);
        gl.enableVertexAttribArray(attribute);

        return true;
      }
    </script>
  </div>
</body>

</html>